<template>
  <el-dialog
    class="ba-operate-dialog"
    :close-on-click-modal="false"
    :model-value="baTable.form.operate ? true : false"
    @close="baTable.toggleForm"
  >
    <template #header>
      <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']">
        {{ baTable.form.operate !== "edit" ? "添加" : "编辑" }}
      </div>
    </template>
    <el-scrollbar
      v-loading="baTable.form.loading"
      class="ba-table-form-scrollbar"
    >
      <div
        class="ba-operate-form"
        :class="'ba-' + baTable.form.operate + '-form'"
        :style="'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'"
      >
        <el-form
          ref="formRef"
          @keyup.enter="baTable.onSubmit(formRef)"
          :model="baTable.form.items"
          label-position="right"
          :label-width="baTable.form.labelWidth + 'px'"
          :rules="rules"
          v-if="!baTable.form.loading"
        >
          <el-form-item prop="objectName" label="对象名称">
            <el-input
              v-model="baTable.form.items!.objectName"
              type="string"
              placeholder="对象名称"
            ></el-input>
          </el-form-item>
          <el-form-item prop="horizontalCabinetCode" label="卧式机柜编码">
            <el-input
              v-model="baTable.form.items!.horizontalCabinetCode"
              type="string"
              placeholder="卧式机柜编码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="objectNameVertical" label="立式机柜别名">
            <el-input
              v-model="baTable.form.items!.objectNameVertical"
              type="string"
              placeholder="立式机柜别名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="verticalCabinetCode" label="立式机柜编码">
            <el-input
              v-model="baTable.form.items!.verticalCabinetCode"
              type="string"
              placeholder="立式机柜编码"
            ></el-input>
          </el-form-item>

          <!-- <el-form-item label="机柜类型" prop="cabinetType">
            <el-select
              v-model="baTable.form.items!.cabinetType"
              placeholder="请选择机柜类型"
            >
              <el-option
                v-for="item in cabinet.type"
                :key="item.dictCode"
                :label="item.dictLabel"
                :value="item.dictValue - 0"
              ></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item prop="mqttFiled" label="MQTT字段名">
            <el-input
              v-model="baTable.form.items!.mqttFiled"
              type="string"
              placeholder="请输入MQTT字段名"
            ></el-input>
          </el-form-item>
          <el-form-item label="告警类别" prop="categoryName">
            <el-select
              v-model="baTable.form.items!.categoryName"
              @change="changeFileds"
            >
              <el-option
                v-for="item in itemObject.typeCategory"
                :key="item.dictCode"
                :label="item.dictLabel"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="unit" label="单位">
            <el-input
              v-model="baTable.form.items!.unit"
              type="string"
              placeholder="请输入单位"
            ></el-input>
          </el-form-item>
          <el-form-item prop="minValue" label="最小值">
            <el-input
              v-model="baTable.form.items!.minValue"
              type="string"
              placeholder="请输入对象最小值"
            ></el-input>
          </el-form-item>
          <el-form-item prop="maxValue" label="最大值">
            <el-input
              v-model="baTable.form.items!.maxValue"
              type="string"
              placeholder="请输入对象最大值"
            ></el-input>
          </el-form-item>
          <el-form-item prop="decimalPlaces" label="小数点位数">
            <el-input
              v-model="baTable.form.items!.decimalPlaces"
              type="number"
              placeholder="保留多少位小数点"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="baTable.form.items!.remark"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 5 }"
              placeholder="备注"
            />
          </el-form-item>
        </el-form>
      </div>
    </el-scrollbar>
    <template #footer>
      <div
        :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'"
      >
        <el-button @click="baTable.toggleForm('')">取消</el-button>
        <el-button
          v-blur
          :loading="baTable.form.submitLoading"
          @click="baTable.onSubmit(formRef)"
          type="primary"
        >
          {{
            baTable.form.operateIds &&
            (baTable.form.operateIds.length > 1 ||
              (baTable.form.operateIds as TableRow).parentId)
              ? "保存并编辑下一项"
              : "保存"
          }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import type { TableRow } from "@/utils/baTable"; //表格列行类型
import { reactive, ref, inject, onMounted } from "vue";
import type baTableClass from "@/utils/baTable";
import type { ElForm, FormItemRule, FormRules } from "element-plus";

const formRef = ref<InstanceType<typeof ElForm>>();
const baTable = inject("baTable") as baTableClass;
const itemObject = inject("itemObject") as any;
const category = inject("category") as any;
const cabinet = inject("cabinet") as any;

const state: {
  regionOptions: anyObj[];
  categoriesOptions: anyObj[];
  gatewayOptions: anyObj[];
} = reactive({
  regionOptions: [], //区域列表
  categoriesOptions: [], //告警类别列表
  gatewayOptions: [], //告警类别列表
});

const props = {
  label: "areaName",
  value: "areaId",
  children: "children",
};

const rules = reactive<FormRules>({
  mqttFiled: [
    { required: true, message: "MQTT字段名不能为空", trigger: "blur" },
  ],
  objectName: [
    { required: true, message: "对象名称不能为空", trigger: "blur" },
  ],
  // categoryName: [
  //   { required: true, message: "告警类别不能为空", trigger: "blur" },
  // ],
  // unit: [{ required: true, message: "单位不能为空", trigger: "blur" }],
});

//选择告警类别
const categoriesChange = (val: any) => {
  baTable.form.items!.categoryName = val.categoryName;
  console.log("选择告警类别", val, baTable.form.items);
};

//选择不同字段组显示
const changeFileds = (value: any) => {
  console.log("选择不同字段组显示", value);
  baTable.form.items!.categoryId = value.dictCode;
  baTable.form.items!.categoryName = value.dictLabel;
};

//获取告警类别列表
const getCategories = () => {
  category
    .getWarningCategoryList({})
    .then((res: any) => {
      state.categoriesOptions = res;
    })
    .catch((err: any) => {});
};

onMounted(() => {
  // getCategories();
});
</script>
<style lang="scss" scoped>
.el-scrollbar {
  overflow: auto;
  position: relative;
  height: 100%;

  .el-scrollbar__wrap {
    overflow: auto;
    height: 100%;
  }
}
</style>
